<script setup>
import {ref, watch} from 'vue'
  import { useUserStore } from "@/stores/User.js"
  import { useRouter } from 'vue-router'
  const router = useRouter();
  const userStore = useUserStore();

  const userInfo = ref(userStore.getUserInfo());

  // 当前激活的菜单项 index
  const activeIndex = ref('1')
  // 菜单项点击事件
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
  }

  watch(()=>userStore.getUserInfo(),(newVal)=>{
    console.log("用户信息更新了",newVal)
    userInfo.value = newVal;
  })

  function logout(){
    userStore.clearAll();
    router.push('/login');
  }


</script>

<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :router="true"
        :ellipsis="false"
        @select="handleSelect"
    >
      <el-menu-item>
        <img
            style="width: 150px"
            src="/logo.png"
            alt="Element logo"
        />
      </el-menu-item>
      <el-menu-item index="/aiGen3d">AI创作</el-menu-item>
<!--      <el-menu-item index="/modelSquare">模型广场</el-menu-item>-->
      <el-menu-item index="/jobList">任务列表</el-menu-item>

      <!-- 占位符用于将后续菜单项推到右侧 -->
      <div class="flex-grow" />



      <!-- 用户头像菜单项：点击不跳转 -->
      <el-menu-item index="userInfo" @click.native.prevent="handleSelect('userInfo', ['userInfo'])">

        <el-popover
            class="box-item"
            content="退出登录还是前往个人中心？"
            placement="bottom-end"
        >
          <template #reference>
            <el-avatar>
              <img v-if="userInfo" :src="userInfo.avatar || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"/>
            </el-avatar>
          </template>
          <div style="display: flex;align-items: center;">
            <el-button
                size="small"
                link
                @click="$router.push('/userInfo')">
              个人中心
            </el-button>
            <el-button type="danger" size="small" @click="logout" link>退出登录</el-button>

          </div>

        </el-popover>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(3) {
  margin-right: auto;
}
</style>
